<template>
  <div class="third-api-manage-list">
    <el-input
      v-model="searchQuery"
      placeholder="请输入接口名称或三方类型进行搜索"
      style="margin-bottom: 20px; width: 300px"
      clearable
    >
      <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </el-input>
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px">添加</el-button>
    <el-button type="primary" @click="handleRefresh" style="margin-bottom: 20px; margin-left: 10px">刷新</el-button>
    <el-table :data="filteredTableData" style="width: 100%" border>
      <el-table-column prop="id" label="ID" v-if="false"></el-table-column>
      <el-table-column prop="configName" label="接口描述" width="180"></el-table-column>
      <el-table-column prop="apiPath" label="接口路径" width="180"></el-table-column>
      <el-table-column prop="thirdType" label="接口三方类型" width="180"></el-table-column>
      <el-table-column prop="config" label="接口配置参数"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px"
    ></el-pagination>

    <!-- 添加对话框 -->
    <el-dialog title="新增第三方配置" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <el-form :model="form" label-width="120px">
        <el-form-item label="ID" v-if="false">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="接口描述">
          <el-input v-model="form.configName"></el-input>
        </el-form-item>
        <el-form-item label="接口路径">
          <el-input v-model="form.apiPath"></el-input>
        </el-form-item>
        <el-form-item label="接口三方类型">
          <el-select v-model="form.thirdType" placeholder="请选择接口三方类型">
            <el-option label="Cloud" value="Cloud"></el-option>
            <el-option label="OA" value="OA"></el-option>
            <el-option label="Cosmic" value="Cosmic"></el-option>
            <!-- 可以根据需要添加更多选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="接口配置参数">
          <el-input type="textarea" v-model="form.config" :rows="4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddOrUpdate">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as dsQueryApi from '@/api/third-api-manage'

export default {
  data() {
    return {
      searchQuery: '',
      tableData: [], // 初始化为空数组
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false, // 对话框显示状态
      form: {
        configName: '',
        thirdType: '',
        config: '',
        apiPath: ''
      }
    }
  },
  computed: {
    filteredTableData() {
      return this.tableData
    }
  },
  created() {
    // 页面加载时调用列表接口
    this.fetchThirdConfigList()
  },
  methods: {
    // 获取第三方配置列表
    async fetchThirdConfigList() {
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchQuery
        }
        const response = await dsQueryApi.searchThirdConfig(params)
        this.tableData = response.records
        this.total = response.total
      } catch (error) {
        console.error('获取第三方配置列表失败:', error)
        this.$message.error('获取第三方配置列表失败')
      }
    },

    // 显示添加对话框
    handleAdd() {
      this.form = {
        configName: '',
        thirdType: '',
        config: ''
      }
      this.dialogVisible = true
    },

    // 新增或修改配置
    async submitAddOrUpdate() {
      try {
        if (this.form.id) {
          // 更新操作
          const response = await dsQueryApi.updateThirdConfig(this.form)
          if (response) {
            this.$message.success('更新第三方配置成功')
            this.fetchThirdConfigList()
            this.handleClose()
          } else {
            this.$message.error(response.data.message || '更新第三方配置失败')
          }
        } else {
          // 新增操作
          const response = await dsQueryApi.addThirdConfig(this.form)
          if (response) {
            this.$message.success('新增第三方配置成功')
            this.fetchThirdConfigList()
            this.handleClose()
          } else {
            this.$message.error(response.data.message || '新增第三方配置失败')
          }
        }
      } catch (error) {
        this.$message.error('操作失败' + error)
      }
    },

    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
      this.form = {
        configName: '',
        thirdType: '',
        config: ''
      }
    },

    // 删除第三方配置
    async handleDelete(index, row) {
      try {
        const response = await dsQueryApi.deleteThirdConfig(row.id)
        if (response) {
          this.$message.success('删除第三方配置成功')
          this.fetchThirdConfigList()
        } else {
          this.$message.error(response.data.message || '删除第三方配置失败')
        }
      } catch (error) {
        console.error('删除第三方配置失败:', error)
        this.$message.error('删除第三方配置失败')
      }
    },

    // 新增刷新方法
    handleRefresh() {
      this.searchQuery = '' // 清空搜索框
      this.fetchThirdConfigList()
    },

    // 搜索方法
    handleSearch() {
      this.fetchThirdConfigList()
    },

    // 修改按钮调用该方法
    handleEdit(index, row) {
      this.form = { ...row }
      this.dialogVisible = true
    },

    // 分页大小改变
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.fetchThirdConfigList() // 调用接口获取数据
    },

    // 当前页改变
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.fetchThirdConfigList() // 调用接口获取数据
    }
  }
}
</script>

<style scoped>
.third-api-manage-list {
  padding: 20px
}
</style>
